<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style/reset.css" />
    <link rel="stylesheet" href="./style/grid.css" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      /* 576px/768px/992px/1200px/1400px
        1 菜单在762px一下是可以折叠的，大于762px(md以上)就是默认显示的
        2 内容区域在992px(lg)一下是一行显示的，大于后分为两行显示
        3 底部的链接在992px以下是换行显示，大于后是一行显示
      */
      :root {
        --content: 100%;
      }
      body {
        background-color: #ebebeb;
      }

      .header {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 190px;
        background-color: white;
      }
      .header-logo img {
        width: 200px;
      }

      .nav {
        border-top: 1px #ebebeb solid;
        background-color: white;
        padding: 0 10px;
      }
      .nav-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 56px;
      }
      .nav-bar i {
        cursor: pointer;
      }
      .nav input {
        display: none;
      }

      .nav-list {
        display: none;
      }

      .nav-list li {
        position: relative;
        height: 56px;
        line-height: 56px;
        padding: 0 20px;
      }

      .nav-list li.active::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: #e67e22;
      }

      .nav input:checked + .nav-list {
        display: block;
      }

      .main {
        padding: 0 15px;
        margin: 0 auto;
        width: var(--content);
        box-sizing: border-box;
      }

      .main-content {
      }

      .article {
        padding: 35px;
        margin-top: 30px;
        background-color: white;
      }
      .article .title {
        font-size: 35px;
        font-weight: 400px;
        text-align: center;
      }
      .article .info {
        text-align: center;
        color: #959595;
      }

      .article .content {
        margin-top: 25px;
        font-size: 18px;
      }
      .article .btn {
        border: none;
        padding: 10px;
        margin: 35px 0;
        background-color: #e67e22;
        cursor: pointer;
      }
      .article .other {
        border-top: 1px solid #ebebeb;
        padding-top: 20px;
      }
      .other i {
        margin-right: 10px;
      }

      .main-aside {
      }
      .main-aside .item {
        padding: 35px;
        margin-top: 30px;
        background-color: white;
      }
      .main-aside .item h2 {
        font-size: 20px;
        font-weight: 400;
        padding-bottom: 10px;
        border-bottom: 1px #cccccc solid;
        position: relative;
      }
      .main-aside .item h2::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 90px;
        height: 1px;
        background-color: yellow;
      }

      .main-aside .item p {
        margin-top: 30px;
      }

      .main-aside .item button {
        margin-top: 30px;
        width: 100%;
        padding: 10px;
        color: white;
        border: none;
        background-color: #e67e22;
      }

      .main-aside .item ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 30px;
      }

      .main-aside .item ul li {
        padding: 10px;
        margin: 0 10px 10px 0;
        border: 1px solid #ccc;
      }

      .foot {
        margin-top: 35px;
        padding-top: 35px;
        background: #202020;
        overflow: hidden;
      }
      .foot-wrapper {
        width: var(--container);
        margin: 0 auto;
      }
      .foot-item {
        padding: 0 30px;
        margin-bottom: 30px;
      }
      .foot-item h3 {
        color: white;
        font-size: 22px;
        font-weight: 400;
        padding-bottom: 10px;
        border-bottom: 1px #cccccc solid;
        position: relative;
      }
      .foot-item h3::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 90px;
        height: 1px;
        background: #e67e22;
      }
      .foot-item div {
        margin-top: 20px;
      }
      .foot-item div a {
        margin: 10px;
        display: inline-block;
        color: #959595;
      }

      .copyright {
        background: #111111;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        color: #555555;
      }

      @media screen and (min-width: 768px) {
        .nav .nav-bar {
          display: none;
        }
        .nav .nav-list {
          display: flex !important;
          justify-content: center;
          align-items: center;
        }
      }
      @media screen and (min-width: 992px) {
        :root {
          --content: 940px;
        }
        .main-aside {
          margin-left: 30px;
        }
      }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="header-logo">
        <img src="./images/ghost-logo.png" alt="" />
      </div>
    </div>
    <div class="nav">
      <div class="nav-bar">
        <label for="target">
          <i class="iconfont icon-zhedie"></i>
        </label>
      </div>
      <input type="checkbox" id="target" />
      <ul class="nav-list">
        <li class="active">首页</li>
        <li>论坛</li>
        <li>中文文档</li>
        <li>快捷手册</li>
        <li>关于</li>
      </ul>
    </div>
    <div class="main row">
      <div class="main-content col-lg-8">
        <div class="article">
          <h2 class="title">全新的 Ghost 文档上线</h2>
          <div class="info">
            <span class="author">作者：王赛</span>
            •
            <span class="time">2018年11月20日</span>
          </div>
          <p class="content">
            我们的整个 Ghost 文档
            已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。
            新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥
            Ghost
            作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括
            Ghost 安装和设
          </p>
          <button class="btn">阅读全文</button>
          <div class="other">
            <i class="iconfont icon-wenjianjia"></i>
            <a href=""> Android</a>
            ，
            <a href="">客户端</a>
          </div>
        </div>
        <div class="article">
          <h2 class="title">全新的 Ghost 文档上线</h2>
          <div class="info">
            <span class="author">作者：王赛</span>
            •
            <span class="time">2018年11月20日</span>
          </div>
          <p class="content">
            我们的整个 Ghost 文档
            已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。
            新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥
            Ghost
            作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括
            Ghost 安装和设
          </p>
          <button class="btn">阅读全文</button>
          <div class="other">
            <i class="iconfont icon-wenjianjia"></i>
            <a href=""> Android</a>
            ，
            <a href="">客户端</a>
          </div>
        </div>
      </div>
      <div class="main-aside col-lg-4">
        <div class="item">
          <h2>声明</h2>
          <p>Ghost 中文版不再继续维护，请去官方下载。</p>
        </div>
        <div class="item">
          <h2>下载</h2>
          <button>ghost最新版</button>
        </div>
        <div class="item">
          <h2>标签云</h2>
          <ul>
            <li>客户端</li>
            <li>客户端</li>
            <li>客户端</li>
            <li>客户端</li>
            <li>客户端</li>

            <li>客户端</li>
            <li>客户端</li>
            <li>客户端</li>
            <li>客户端</li>
            <li>客户端</li>
            <li>客户端</li>
            <li>客户端</li>
            <li>客户端</li>
            <li>客户端</li>
            <li>客户端</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="foot-wrapper row">
        <div class="foot-item col-lg-4">
          <h3>友链</h3>
          <div>
            <a href="#">Bootstrap中文网</a>
            <a href="#">React</a>
            <a href="#">Vue.js</a>
            <a href="#">Svelte</a>
            <a href="#">Preact</a>
            <a href="#">Babel</a>
            <a href="#">Webpack</a>
            <a href="#">Rollup.js</a>
            <a href="#">Bootstrap中文网</a>
            <a href="#">React</a>
            <a href="#">Vue.js</a>
            <a href="#">Svelte</a>
            <a href="#">Preact</a>
            <a href="#">Babel</a>
            <a href="#">Webpack</a>
            <a href="#">Rollup.js</a>
          </div>
        </div>
        <div class="foot-item col-lg-4">
          <h3>标签云</h3>
          <div>
            <a href="#">客户端</a>
            <a href="#">Android</a>
            <a href="#">jQuery</a>
            <a href="#">Ghost 0.7 版本</a>
            <a href="#">开源</a>
            <a href="#">助手函数</a>
            <a href="#">客户端</a>
            <a href="#">客户端</a>
            <a href="#">Android</a>
            <a href="#">jQuery</a>
            <a href="#">Ghost 0.7 版本</a>
            <a href="#">开源</a>
            <a href="#">助手函数</a>
            <a href="#">客户端</a>
          </div>
        </div>
        <div class="foot-item col-lg-4">
          <h3>合作伙伴</h3>
          <div>
            <a href="#">腾讯</a>
            <a href="#">阿里巴巴</a>
            <a href="#">百度</a>
          </div>
        </div>
      </div>
    </div>
    <div class="copyright">
      <p>
        Copyright © Ghost中文网 | 京ICP备11008151号-11 |
        京公网安备11010802014853
      </p>
    </div>
  </body>
</html>
